import React, { Component } from 'react';

import './homepage_list.css'
import Img_2 from '../../images/1.jpg'

import { addProduct, cuserInfo } from '../../../utils/api'

export default class Homepage_list extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data1: [
                {
                    size: '小号'
                }
            ],
            data: [],
            num: 1
        }
    }

    goProductM = () => {
        this.props.history.push('/product_details')
    }
    goAddressM = () => {
        this.props.history.push('/delivery_address')
    }

    render() {
        const { data } = this.props
        var arr = []
        arr.push(data)

        return (
            <div className="js-quick-shop box-content">
                {
                    arr.map((item, index) => {
                        return (
                            <div key={index}>
                                <div className="quick-shop js-product_section">
                                    <img src={item.cover} alt="" />
                                </div>
                                <div className="text-wrap">
                                    <h3 className="quick-shop_title">
                                        <div className="shop_title">{item.name}</div>
                                    </h3>
                                    <span className="red_money">${item.price}</span>
                                    <span className="black_money">${item.price}</span>
                                    <div className="sale_saving">
                                        节省50%（$45.99）
                                    </div>
                                    <span className="regular-description">
                                        {item.description}
                                    </span>
                                    <span className="js-product-details">
                                        <div className="secondary_button"
                                            title="HAHA小丑运动衫秋季黑色3D印花连帽外套细节"
                                            onClick={this.goProductM.bind(this)}
                                        >
                                            <font style={{ verticalAlign: 'inherit' }}>
                                                <font style={{ verticalAlign: 'inherit' }}>查看全部细节</font>
                                            </font>
                                        </div>
                                    </span>
                                    <div className="swatch_options">
                                        <div className="swatch clearfix" data-option-index="0">
                                            <div className="option_title">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>尺寸</font>
                                                </font>
                                            </div>
                                            {
                                                this.state.data1.map((item, index) => {
                                                    return (
                                                        <div className="swatch-element s-swatch available" key={index}>
                                                            <label>
                                                                <font style={{ verticalAlign: 'inherit' }}>
                                                                    <font style={{ verticalAlign: 'inherit' }}>{item.size}</font>
                                                                </font>
                                                            </label>
                                                        </div>
                                                    )
                                                })
                                            }
                                        </div>
                                    </div>
                                    <div className="purchase-details">
                                        <div className="purchase-details_quantity">
                                            <label className="num">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>数量</font>
                                                </font>
                                            </label>
                                            <span onClick={this.shopCountAM.bind(this)} className="ss-icon-one  product-minus">
                                                <span className="icon-minus" >-</span>
                                            </span>
                                            <input type="tel" className="quantity-one" value={this.state.num} />
                                            <span onClick={this.shopCountIM.bind(this)} className="ss-icon-one product-plus">
                                                <span className="icon-plus" >+</span>
                                            </span>
                                        </div>
                                        <div className="purchase-details_buttons">
                                            <button type="submit" className="add_to_cart"
                                                onClick={this.addProductM.bind(this, item)}
                                            >
                                                <span className="text">
                                                    <font style={{ verticalAlign: 'inherit' }}>
                                                        <font style={{ verticalAlign: 'inherit' }}>添加到购物车</font>
                                                    </font>
                                                </span>
                                            </button>
                                            <div className="payment-button">
                                                <button type="button" className="shopify-payment-button"
                                                    onClick={this.goAddressM.bind(this)}
                                                >
                                                    <font style={{ verticalAlign: 'inherit' }}>
                                                        <font style={{ verticalAlign: 'inherit' }}>立即购买</font>
                                                    </font>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }

    shopCountAM = () => {
        this.setState({
            num: (this.state.num - 1) >= 1?(this.state.num - 1):1
        })
    }
    shopCountIM = () => {
        this.setState({
            num: this.state.num + 1
        })
    }

    addProductM = (data) => {
        // console.log("===========>", data)

        // var alldata = ''
        // cuserInfo().then((res) => {
        //     console.log(res, 're哥仨大会时间里')

        //     let params = {
        //         goods_count: this.state.num,
        //         goods_id: data.id,
        //         user_id: res.data.data.id
        //     }
        //     alldata = params
        //     console.log("hhhhhhhhhhh=>", alldata)

        //     addProduct(alldata).then((resd) => {
        //         console.log("添加购物车的", resd)
        //         this.setState(() => {
        //             return {
        //                 data: data
        //             }
        //         })
        //         console.log('asdddddddddddd', data)
        //     })
        // })
    }
}